<template>
	<view>
		<view>
		
		<!-- 选择收货地址的盒子 -->
		 <view class="address-choose-box" v-if="!addstr">
		  <!-- <view class="address-choose-box" v-if="JSON.stringify(address) === '{}'"> -->
		    <button type="primary" size="mini" class="btnChooseAddress"  @click="chooseAddress" >请选择收货地址+</button>
		 </view>
		
		 <!-- 渲染收货信息的盒子 -->
		 <view class="address-info-box" v-if="addstr"  @click="chooseAddress">
		   <view class="row1">
		     <view class="row1-left">
		       <view class="username">收货人：<text>{{address.userName}}</text></view>
		     </view>
		     <view class="row1-right">
		       <view class="phone">电话：<text>{{address.telNumber}}</text></view>
		       <uni-icons type="arrowright" size="16"></uni-icons>
		     </view>
		   </view>
		   <view class="row2">
		     <view class="row2-left">收货地址：</view>
		     <view class="row2-right">{{address.provinceName+address.cityName+address.countyName+address.detailInfo}}</view>
		   </view>
		 </view>
		
		  <!-- 底部的边框线 -->
		  <image src="/static/ress-border.png" class="address-border"></image>
		</view>
	</view>
</template>

<script>
	// 1. 按需导入 mapState 和 mapMutations 这两个辅助函数
	import { mapState, mapMutations,mapGetters  } from 'vuex'
	export default {
		name:"my-address-test",
		state:{
			num:1
		},
		data() {
			
			return {
				addstr:false,
				address:{},
				
			};
		},
		
		methods:{
			chooseAddress(e){
				var	_this=this
				wx.chooseAddress({
				  success (res) {
				    // console.log(res.userName)
				    // console.log(res.postalCode)
				    // console.log(res.provinceName)
				    // console.log(res.cityName)
				    // console.log(res.countyName)
				    // console.log(res.detailInfo)
				    // console.log(res.nationalCode)
				    // console.log(res.telNumber)
					_this.addstr=true;
					_this.address=res;
					console.log(_this.addstr)
					//console.log(_this.address)
				  }
				})
			},
			
			// chooseAddress(res){
			// var	_this=this
			// 	        console.log(JSON.stringify(res))
			// 			 console.log(res.userName)
			// 			 _this.add=true;
			// 			  console.log(_this.add)
				    
			// }
		},
		
		
	}
</script>

<style lang="scss">
// 底部边框线的样式
.address-border {
  display: block;
  width: 100%;
  height: 5px;
}

// 选择收货地址的盒子
.address-choose-box {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 渲染收货信息的盒子
.address-info-box {
  font-size: 12px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5px;

  // 第一行
  .row1 {
    display: flex;
    justify-content: space-between;

    .row1-right {
      display: flex;
      align-items: center;

      .phone {
        margin-right: 5px;
      }
    }
  }

  // 第二行
  .row2 {
    display: flex;
    align-items: center;
    margin-top: 10px;

    .row2-left {
      white-space: nowrap;
    }
  }
}
</style>
